import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    // @表示src目录
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/views/search/index.vue')
  },
  {
    path: '/article/:articleId',
    name: 'article',
    props: true, //开启路由传参
    component: () => import('@/views/article/index.vue')
  },
  {
    path: '/',
    name: 'layout',  
    redirect: '/home',
    component: () => import('@/views/layout/index.vue'),
    children: [
      {
        path: '/home', 
        name: 'home',
        meta: {
          keepAlive: true, // 需要被缓存
        },
        component: () => import('@/views/home/index.vue'),
      },
      {
        path: '/qa',
        name: 'qa',
        component: () => import('@/views/qa/index.vue'),
      },
      {
        path: '/video',
        name: 'video',
        component: () => import('@/views/video/index.vue'),
      },
      {
        path: '/my',
        name: 'my',
        component: () => import('@/views/my/index.vue'),
      }
    ]
  },
]

const router = new VueRouter({
  routes,
  // scrollBehavior (to, from, savedPosition) {
  //   //如果savedPosition存在，滚动条会自动跳到记录的值的地方
  //   //但是当给某页面滚动区域设置了固定高度，记录滚动位置的功能就会不起作用
  //   if (savedPosition) { 
  //     return savedPosition
  //   } else {
  //     return {x: 0, y: to.meta.top || 0} //如果savedPosition失效，则跳转到to.meta.top位置
  //   }
  // }
})

export default router
